<template>
  <div class="bgc">
    <van-icon class="logo" class-prefix="icon" name="qichezhijia" size="200PX" />
    <van-form @submit="userLogin">
      <van-cell-group inset>
        <van-field v-model="user.username" name="用户名" label="用户名" placeholder="用户名" :rules="[
          { required: true, message: '请填写用户名' },
          {
            pattern: /^[a-z]\w{3,7}$/,
            message: '4到8位英文数字字母_组成,必须小写字母开头'
          }
        ]" />
        <van-field v-model="user.pwd" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" @click="Register">
        注册
      </van-button>
    </div>
  </div>

</template>

<script setup lang="ts" name="login">
import { useRouter } from 'vue-router';
import { reactive } from 'vue';
import { doLogin } from '@a/index'
import { showToast } from 'vant';
import useUserStore from '@s/user'

const router = useRouter()
const userStore = useUserStore()
const Register = () => {
  router.push({
    path: '/register'
  })
}
const user = reactive({
  username: '',
  pwd: ''
})
const userLogin = () => {
  doLogin({
    ...user,
    deviceId: 'hhh',
    deviceName: 'lll'
  }).then(res => {
    console.log(res);
    if (res.data.code === 0) {
      localStorage.setItem('uid', res.data.data.uid)
      localStorage.setItem('token', res.data.data.token)
      userStore.$patch({
        uid: res.data.data.uid,
        token: res.data.data.token
      })
      showToast({
        type: 'success',
        message: '用户登陆成功',
        duration: 2000,
        onClose: () => {
          router.replace('/')
        }
      })
    }
    if (res.data.code === 500) {
      showToast({
        type: 'fail',
        message: res.data.msg,
        duration: 2000
      })
    }
  })
}
</script>

<style lang="scss" scoped>
:deep .logo {
  position: fixed;
  top: 0;
  left: 25%;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.5);
}

.bgc {
  height: 100vh;
  background-image: url(./../../assets/login.jpg);
  background-size: cover;
  padding-top: 350px;

  :deep .van-cell-group {
    background-color: transparent;
    margin-bottom: 60px;

    .van-cell {
      background-color: transparent;
    }
  }

  button {
    background-color: transparent;
    border: 1px solid #999;
  }
}
</style>